<template>
  <div class="box-container">
    <four-angel>
      <div class="title-wrapper">
        <div class="boxTitle">
          {{ boxTitle }}
          <div class="image">
            <img src="../../img/icon-wave.gif" alt="Image">
          </div>
        </div>
      </div>
      <div class="content-wrapper" :style="{height: 'calc(100% - 28px)'}">
        <div class="main-content">
          <slot />
        </div>
      </div>
    </four-angel>
  </div>
</template>

<script>
import fourAngel from '../fourAngel/index.vue'
export default {
  components: { fourAngel },
  props: ['boxTitle']
}
</script>
<style lang="scss" scoped>
.box-container {
  width: 100%;
  height: 100%;
  position: relative;
  .title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1vw;
    .boxTitle {
      height: 2vh;
      line-height: 2vw;
      width: 100%;
      font-size: 1.1rem;
      color: #fff;
      font-weight: bold;
      font-family: "黑体";
      position: absolute;
      top: -4vh;
      left: 0;
      display: flex;
      .image {
        display: flex;
        align-items: flex-start;
        img {
          position: absolute;
          right: 0;
          max-width: 100%;
          max-height: 100%;
          margin-top: 1vh;
        }
      }
    }
  }
  .content-wrapper {
    padding: 10px;
    .main-content {
      height: calc(100% - 28px);
      width: 100%;
    }
  }
}
</style>
